<script>
  import CcDragBar from './CcDragBar'
  import {eventBus} from './abase/DragEventBus'
	export default {
		name: "CcDragContainer",
    components: {
		  CcDragBar
	  },
    props: {
			width: {
				type: [Number, String],
        default: () => 400
      },
      height: {
				type: [Number, String],
				default: () => 300
      },
      containerType: {
				type: String,
        default: () => 'output'
      },
      list: {
				type: Array,
        default: () => ([])
      },
      className: {
				type: [String],
        default: () => ''
      },
      isPutData: {
				type: Boolean,
        default: false
      }
    },
    data() {
			return {
        isOndrag: false
      }
    },
    created() {
			if(this.isPutData){
				eventBus.addListener('deleteDragItem', this.deleteDragItem);
				eventBus.addListener('onDrag', this.onDrag)
      }
    },
    mounted() {
		  if(this.containerType === 'input' || this.containerType === 'both'){
		  	this.$refs.container.ondragover = this.onDragOver;
		  	this.$refs.container.ondrop = this.onDrop;
      }
    },
    methods: {
			onDragOver(e) {
				// console.log(e);
				e.preventDefault();
      },
			onDrop(e) {
				console.log(e.dataTransfer.getData('ccDragData'))
        const data = e.dataTransfer.getData('ccDragData');
        this.$emit('receiveData', JSON.parse(data));
				eventBus.emit('deleteDragItem', data);
      },
			deleteDragItem(data){
				const index = this.list.findIndex(item => JSON.stringify(item) === data);
				if(index !== -1){
					this.list.splice(index, 1)
        }
      },
      onDrag(bool){
				this.isOndrag = bool;
      }
    },
    render(h) {
			const dragBarList = this.list.map((item, index) => (<cc-drag-bar>
				<span>{item.name}</span>
			</cc-drag-bar>));
      const zIndex = this.isOndrag ? 22 : 'unset';
			return (
				<div ref="container" class={`cc-drag-container ${this.className}`} style={{width: `${this.width}px`, height: `${this.height}px`, zIndex }}>
					{this.$slots.default}
        </div>
      )
		},
	}
</script>

<style scoped>
  .cc-drag-container{
    min-width: 200px;
    min-height: 15px;
    background: #f6f6f6;
    border-radius: 4px;
    box-shadow: 0 0 4px black;
    padding: 8.01px 10px;
    margin: -0.01px 0;
    transition: linear 0.3s;
    position: relative;

  }
</style>
